<!--
绝对定位
    position: absolute;
        - 拼爹型。移动位置时是以祖先元素为参照的。（父、爷爷、祖先）

特点
    1）没有祖先元素、或祖先元素没有定位时，
        以浏览器（document文档）为参照物来移动位置
    2）约束/限制到指定盒子内的绝对定位移动，
        以离最近一级的有定位（相/绝/固/粘）的祖先盒子为参照点移动位置
        例如：父亲没定位，但爷爷有定位，曾曾爷爷有定位，则你只能在爷爷盒子中进行绝对定位移动。
    3）绝对定位会脱标，不占用原来位置，会影响后面的标准流布局
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .father {
        width: 500px;
        height: 500px;
        background: skyblue;
    }
    .son {
        /* ----------- */
        position: absolute;
        left: 0;
        bottom: 150px;
        /* ----------- */
        width: 300px;
        height: 300px;
        background: cyan;
    }
    .other {
        width: 700px;
        height: 100px;
        background: purple;
    }
</style>

<div class="father">
    <div class="son"></div>
</div>
<div class="other"></div>